<!--
 * @Author: chentao 294446993@qq.com
 * @Date: 2022-12-12 15:59:44
 * @LastEditors: chentao 294446993@qq.com
 * @LastEditTime: 2022-12-16 18:09:14
 * @FilePath: \desktop\frontend\src\components\dialog\dialogGroupManagerFunc.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog v-model="dialogGroupManagerVisible" 
   destroy-on-close
   :title="title" 
   center custom-class="dialog-container"
   :width="width"
   :height="height"
    :before-close="close">
    <div class="group-content-container">
      <!-- 全员禁言 -->
      <div class="dialog-item-space1">
        <span class="dialog-item-space-label">
            groupAllStopTalk
         </span>
        <el-switch v-model="muteStatus" @change="onMuteStatusChange" />
      </div>
      <div class="dialog-item-line"></div>
      <!-- 指定用户禁言 -->
      <div class="dialog-item-space2">
        <div class="dialog-item-space2-in">
          <div class="dialog-item-space-label-title">
             selectUserSilence
          </div>
          <img class="right-more" src="@/assets/images/groupmanager/right_more.png" />
        </div>
      </div>
      <div class="dialog-item-line"></div>
      <!-- 群消息撤回 -->
      <div class="dialog-item-space2">
        <div class="dialog-item-space2-in">
          <div class="dialog-item-space-label-title">
             groupMsgRecall
          </div>
          <el-switch v-model="isMesRecall" @change="onMesRecallChange" />
        </div>
        <div class="dialog-item-space-label-desc">
          groupMsgRecallTips
        </div>
      </div>
      <div class="dialog-item-line"></div>
      <!--发言频率限制 -->
      <div class="dialog-item-space2">
        <div class="dialog-item-space2-in">
          <div class="dialog-item-space-label-title">
             talkFrequencyLimit
          </div>
          <el-switch v-model="speakFrequencyRestrict" @change="onSpeakFrequencyRestrictChange" />
        </div>
        <div class="dialog-item-space-label-desc">
           talkFrequencyLimitTips
        </div>
      </div>
      <div class="dialog-item-line"></div>

      <!-- 进入群管理员添加界面 -->
      <div class="dialog-item-space3" @click="goManagerDialogList()">
        <div class="dialog-item-space-label-title">
           groupAdministrator
        </div>
        <img class="right-more" src="@/assets/images/groupmanager/right_more.png" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  defineComponent,
  ref,
  toRefs,
  computed,
  watch,
  watchEffect,
} from "vue";
import { useStore, mapState } from "vuex";
import { ElMessage } from "element-plus";
import {
  ADD_GROUP_MANAGER_LIST,
  GROUP_MANAGER_FUNC,
  QUERY_GROUP_MANAGER_LIST,
  FETCH_GROUP_MEMBER_LIST
} from "@/store/actiontypes";
import { useI18n } from 'vue-i18n'
export default defineComponent({
  name: "dialogGroupManagerFunc",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    width: {
        type: String,
        default: "383",
    },
    height:{
      type:String,
      default:"335"
    },
    cancelShow: {
      type: Boolean,
      default: true,
    },
    confirmShow: {
      type: Boolean,
      default: true,
    },
    closeBtnText: {
      type: String,
      default: "取消",
    },
    okBtnText: {
      type: String,
      default: "确定",
    },
  },
  setup(props, context) {
    const store = useStore();
    const currentGroupInfo = computed(() => store.state.chat.currentGroupInfo);
    let muteStatus = ref(currentGroupInfo.value.muteStatus === 1); //是否全员禁言
    let speakFrequencyRestrict = ref(
      currentGroupInfo.value.speakFrequencyRestrict === 1
    ); //是否限制发言频率
    let isMesRecall = ref(currentGroupInfo.value.isMesRecall === 1); //群消息是否可以撤回，0否，1是
    const close = () => {
      store.commit(GROUP_MANAGER_FUNC, {
        dialogGroupManagerVisible: false,
      });
    };
    //确定
    const onConfirm = () => {
      close();
    };
    //取消
    const onCancel = () => {
      close();
    };
    //控制是否打开弹窗
    const dialogGroupManagerVisible = computed(() => {
      return store.state.dialogue.dialogGroupManagerVisible;
    });
    watch(
      [dialogGroupManagerVisible],
      (newValue, oldValue) => {
        if (newValue) {
          muteStatus.value = currentGroupInfo.value.muteStatus === 1;
          speakFrequencyRestrict.value =
            currentGroupInfo.value.speakFrequencyRestrict === 1;
          isMesRecall.value = currentGroupInfo.value.isMesRecall === 1;
        }
      },
      { immdiate: true }
    );
    //是否全部禁言这里还要更新接口的
    const onMuteStatusChange = (val) => {
      muteStatus.value = val;

    };
    //改变发言频率
    const onSpeakFrequencyRestrictChange = (val) => {
      speakFrequencyRestrict.value = val;
    };
    const onMesRecallChange = (val) => {
      isMesRecall.value = val;
    };
    //去管理员弹窗列表
    const goManagerDialogList = () => {
      store.commit(ADD_GROUP_MANAGER_LIST, {
        dialogGroupManagerListVisible: true,
      });
      close();
    };
    return {
      dialogGroupManagerVisible: dialogGroupManagerVisible, //这个需要外面控制的
      muteStatus,
      onMuteStatusChange,
      speakFrequencyRestrict,
      onSpeakFrequencyRestrictChange,
      isMesRecall,
      onMesRecallChange,
      goManagerDialogList, //管理员弹窗打开函数
      onCancel,
      onConfirm,
      close,
    };
  },
});
</script>

<!-- 去掉scoped会污染全局样式 -->
<style lang="less" scoped>
// /deep/ .el-dialog {
//     width: 383px;
//     height: 335px;
//     display: flex;
//     flex-direction: column;
//     align-items: center;

// }

// .focus /deep/ .el-dialog__title {
//     font-size: 16px;
//     color: #303133;
//     color: red;
// }

// /deep/.el-dialog__body {
//      //width: 100%;
//      width: 383px;
//     height: 335px;
//     box-sizing: border-box;

// }

// :deep(.el-dialog__body) {
//   background-color: red;
// }

.dialog-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: green ;
  //padding: 0%;

  .group-content-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0px;

    .dialog-item-space1 {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 26px;

      .dialog-item-space-label {
        color: #303133;
        font-size: 14px;
        font-weight: 400;
        // font-family: PingFang SC-Regular, PingFang SC;
        cursor: default;
      }

      .switch-icon {
        width: 28px;
        height: 16px;
        cursor: default;
      }
    }

    .dialog-item-line {
      width: 100%;
      height: 1px;
      background-color: #eee;
      margin-top: 12px;
      cursor: default;
    }

    .dialog-item-space2 {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 0 0;
      box-sizing: border-box;
      margin-top: 12px;
      cursor: default;
      align-items: flex-start;

      .dialog-item-space2-in {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .dialog-item-space-label-title {
          color: #303133;
          // font-family: PingFang SC-Regular, PingFang SC;
        }

        .right-more {
          width: 16px;
          height: 16px;
        }

        .switch-icon {
          width: 28px;
          height: 16px;
          cursor: default;
        }
      }

      .dialog-item-space-label-desc {
        color: #909399;
        // font-family: PingFang SC-Regular, PingFang SC;
        font-size: 12px;
      }
    }

    .dialog-item-space3 {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      margin-bottom: 26px;
      cursor: default;

      .dialog-item-space-label-title {
        color: #303133;
        // font-family: PingFang SC-Regular, PingFang SC;
      }

      .right-more {
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>
